//页面元素的构造和DOM关系

var styleGZ = {
    // 用古板的方式进行一次有趣的尝试
    // 某些终点的远途
    // Gz(obj, id) {  //属性值筛选，在对象的属性中，除style属性外的属性皆用'isCl'开头
    //     var styleArr = []
    //     var styleArrData = []
    //     for (y in obj) {
    //         let b = y.substring(4, 0);
    //         if (b != 'isCl') { //挑出属性中的非常量
    //             styleArr.push(y)
    //             styleArrData.push(obj[y])
    //         }
    //     }
    //     let objB = styleGZ.BoxGz(styleArr, styleArrData, id);
    //     for (y in obj) {
    //         let b = y.substring(4, 0);
    //         if (b == 'isCl') { //挑出属性中的非常量
    //             objB.y = obj[y]
    //         }
    //     }
    //     return objB
    // },

    // //样式构造
    // BoxGz(styleArr, styleArrData, id) {
    //     let b = document.createElement("div")
    //     for (var i = 0; i <= styleArr.length - 1; i++) {
    //         b.style[styleArr[i]] = styleArrData[i];
    //     }
    //     b.id = id;
    //     return b;
    // },

    boxComponent(Component, id) { //组件构造
        switch (Component) {
            case 'contentBoxMod': //内容栏组件，
                //构造
                let contentBox = document.createElement("div");
                contentBox.classList.add('contentBox');
                contentBox.id = id;

                let contentBox_tagBox = document.createElement("div");
                contentBox_tagBox.classList.add('contentBox_tagBox');

                let contentBox_contentBox = document.createElement("div");
                contentBox_contentBox.classList.add('contentBox_contentBox');

                let contentBox_tagBox_nametimetag = document.createElement("div");
                contentBox_tagBox_nametimetag.classList.add('contentBox_tagBox_nametimetag');

                let contentBox_tagBox_lineL = document.createElement("div");
                contentBox_tagBox_lineL.classList.add('contentBox_tagBox_line');

                let contentBox_tagBox_lineR = document.createElement("div");
                contentBox_tagBox_lineR.classList.add('contentBox_tagBox_line_R');

                let contentBox_tagBox_head = document.createElement("div");
                contentBox_tagBox_head.classList.add('contentBox_tagBox_head');

                let contentBox_tagBox_editbtm = document.createElement("div");
                contentBox_tagBox_editbtm.classList.add('contentBox_tagBox_editbtm');

                let contentBox_tagBox_editbtm_box = document.createElement("div");
                contentBox_tagBox_editbtm_box.classList.add('contentBox_tagBox_editbtm_box');

                let contentBox_tagBox_editbtm_box_delete = document.createElement("div");
                contentBox_tagBox_editbtm_box_delete.classList.add('contentBox_tagBox_editbtm_box_delete');

                let contentBox_tagBox_editbtm_box_replay = document.createElement("div");
                contentBox_tagBox_editbtm_box_replay.classList.add('contentBox_tagBox_editbtm_box_replay');

                let contentBox_contentBox_body = document.createElement("div");
                contentBox_contentBox_body.classList.add('contentBox_contentBox_body');

                let clear = document.createElement("div");
                clear.classList.add('clear');

                //结构关系
                var fragment = document.createDocumentFragment(); //注意这个有兼容问题 ie的为currentStyle（）
                fragment.appendChild(contentBox);
                contentBox.appendChild(contentBox_tagBox);
                contentBox.appendChild(contentBox_contentBox);
                contentBox_tagBox.appendChild(contentBox_tagBox_head);
                contentBox_tagBox.appendChild(contentBox_tagBox_lineL);
                contentBox_tagBox.appendChild(contentBox_tagBox_nametimetag);
                contentBox_tagBox.appendChild(contentBox_tagBox_lineR);
                contentBox_tagBox.appendChild(contentBox_tagBox_editbtm);
                contentBox_tagBox_editbtm.appendChild(contentBox_tagBox_editbtm_box);
                contentBox_tagBox_editbtm_box.appendChild(contentBox_tagBox_editbtm_box_delete);
                contentBox_tagBox_editbtm_box.appendChild(contentBox_tagBox_editbtm_box_replay);

                contentBox_contentBox.appendChild(contentBox_contentBox_body);
                contentBox.appendChild(clear);

                contentBox_tagBox_lineL.innerHTML = '————————————————————————————————————————————————————————————';
                contentBox_tagBox_lineR.innerHTML = '————————————————————————————————————————————————————————————';

                contentBox_contentBox.addEventListener('click', function () {
                    let contentBox_contentBox_bodyHight = contentBox_contentBox_body.offsetHeight;
                    let BoxHightmin = parseInt(getComputedStyle(contentBox_contentBox).minHeight);
                    if (contentBox_contentBox.offsetHeight == BoxHightmin) {
                        contentBox_contentBox.style.height = contentBox_contentBox_bodyHight + 'px';
                    } else {
                        contentBox_contentBox.style.height = BoxHightmin + 'px';
                    }
                })

                contentBox_tagBox_editbtm_box_delete.onclick = function () {
                    contentBox.innerHTML = '';
                    contentBox.remove;
                    contentMsgStorage(id, '', 'delete', '', '');
                };

                contentBox_tagBox_editbtm_box_replay.addEventListener('click', function () {
                    let mainH = document.querySelector('main').offsetHeight;
                    $B_edit.classList.add('showUp');
                    if (mainH <= 400) {
                        $B_edit.style.position = 'absolute';
                    } else {
                        $B_edit.style.position = 'sticky';
                    }
                    $B_edit_Head.value =  contentBox_tagBox_head.innerText;
                    $B_edit_Area.value =  contentBox_contentBox_body.innerText;
                    $B_Btm_submit.doing= id;
                    

                })

                $Zcontent.appendChild(fragment);
                return { //返回
                    obj: contentBox,
                    nameDatetag: contentBox_tagBox_nametimetag,
                    contentTag: contentBox_contentBox_body,
                    contentHead: contentBox_tagBox_head,
                    contentBox_tagBox_editbtm_box: contentBox_tagBox_editbtm_box,
                    contentBox_tagBox_editbtm_box_delete: contentBox_tagBox_editbtm_box_delete,
                    contentBox_tagBox_editbtm_box_replay: contentBox_tagBox_editbtm_box_replay,

                }

            case 'ClassBoxMod': //小组卡片组件
                let classbox = document.createElement("div");
                let classbox_img = document.createElement("div");
                let classbox_rbox = document.createElement("div");
                var classNameSpan = document.createElement("span");
                var classRootSpan = document.createElement("span");
                var classbox_rbox_edit = document.createElement("ul");
                classbox.id = id;
                classNameSpan.id = id + 'classNameSpan';
                classRootSpan.id = id + 'classRootSpan';
                classbox.classList.add('classCard');
                classbox_img.classList.add('classCard_img');
                var fragment = document.createDocumentFragment();
                fragment.append(classbox);
                classbox.appendChild(classbox_img);
                classbox.appendChild(classbox_rbox);
                classbox_rbox.appendChild(classNameSpan);
                classbox_rbox.appendChild(classRootSpan);
                classbox_rbox.appendChild(classbox_rbox_edit);
                $Zclass.appendChild(fragment);

                return {//暴露三个数据，卡片主体，卡片名字，卡片权限
                    obj: classbox,
                    classNameSpanobj: classNameSpan,
                    classRootSpanobj: classRootSpan,
                    img:classbox_img,
                };
            case "addClassBoxMod": //+号组件
                let classboxAddBtm = document.createElement("div");
                classboxAddBtm.classList.add('classCard');
                classboxAddBtm.id = 'classCard_add'
                $Zclass.appendChild(classboxAddBtm);
                classboxAddBtm.innerText = '+';
                classboxAddBtm.addEventListener('click', function () {
                    $T_addClass.classList.add('showUp');
                });
                break;
            case 'editComponent':


                break;
        }
    }
}






//整体编辑栏

// var newContentBtmObj={ //编辑按钮    唤出编辑界面
//     width: '50px',
//     height: '50px',
//     position: 'fixed',
//     right: '50px',
//     bottom: '50px',
//     backgroundColor: '#fff',
//     borderColor: '#000',
//     borderRadius: '25px',
//     borderWidth: '3px',
//     borderStyle: 'solid',
//     color: '#000',
//     fontSize:'40px',
//     textAlign: 'center',
//     lineHeight: '40px',
//     /* box-shadow: 2px 2px 2px 2px; */
//     cursor: 'pointer',
// }